<template>
    <div class="admin">
        <el-container>
            <el-container>
                <Transition name="fold">
                    <el-aside width="200px" v-style:color="global.adminTheme.textColor0"
                        v-style:backgroundColor="global.adminTheme.asideBgColor">
                        <AsideWrap>
                            <TopTitle></TopTitle>
                            <HMenu></HMenu>
                        </AsideWrap>
                    </el-aside>
                </Transition>
                <MainWrap>
                    <el-header>
                        <HeaderWrap>
                            <Controller></Controller>
                            <User></User>
                        </HeaderWrap>
                    </el-header>
                    <el-main v-style:backgroundColor="global.adminTheme.mainBgColor">
                        <Suspense>
                            <router-view></router-view>
                        </Suspense>
                    </el-main>
                </MainWrap>
            </el-container>
        </el-container>
    </div>
</template>
<script lang="ts" setup>
import AsideWrap from "@/components/Admin/Aside/AsideWrap.vue"
import HMenu from "@/components/Admin/Aside/Menu/HMenu.vue"
import TopTitle from "@/components/Admin/Aside/TopTitle.vue"
import Controller from "@/components/Admin/Header/Controller.vue"
import HeaderWrap from "@/components/Admin/Header/HeaderWrap.vue"
import User from "@/components/Admin/Header/User.vue"
import MainWrap from "@/components/Admin/Main/MainWrap.vue"
import { IGlobalState } from "@/global/types"
import { inject } from "vue"
import { useRouter } from "vue-router"
import { useStore } from "vuex"

const global: IGlobalState = inject("global")
const store = useStore()
const router = useRouter();
store.dispatch('admin/generateMenuRoutes', router.getRoutes());
</script>
<style lang="less"></style>
<style scoped lang="less">
.fold-left-enter-active,
.fold-left-leave-active,
.fold-right-enter-active,
.fold-right-leave-active {
    transition: all 0.5s ease;
}

.fold-left-enter,
.fold-left-leave-to,
.fold-right-enter,
.fold-right-leave-to {
    transform: translateX(0);
}

.fold-left-enter-to,
.fold-left-leave,
.fold-right-enter-to,
.fold-right-leave {
    transform: translateX(-50%);
}

.fold-right-enter,
.fold-right-leave-to,
.fold-left-enter,
.fold-left-leave-to {
    transform: translateX(0);
}

.fold-right-enter-to,
.fold-right-leave,
.fold-left-enter-to,
.fold-left-leave {
    transform: translateX(50%);
}
</style>
